<script setup>
import { ref, reactive } from 'vue'
import config from '@/assets/js/config'
import { showMsg, showConfirm } from '@/assets/js/utils'
import { getDeviceList, deleteDevice } from '@/assets/api/device'
import { useRouter } from 'vue-router'
const router = useRouter()

const deviceClassify = 3
const deviceClass = 3001

const filterForm = reactive({
    deviceClassify,
    deviceClass,
})

const loading = ref(false)
const currentPage = ref(1)
const pageSize = 10
const total = ref(0)
const dataList = ref([])
function getData(page = 1) {
    loading.value = true
    const params = Object.assign(
        {
            page,
            limit: pageSize,
        },
        filterForm
    )
    getDeviceList(params).then((res) => {
        loading.value = false
        const { Items, totalSize } = res.data
        dataList.value = Items
        currentPage.value = +res.data.currentPage
        total.value = totalSize
    })
}
getData(1)
function handleCurrentChange(e) {
    getData(e)
}
function searchAction() {
    getData(1)
}

// 导入
const importModalVisible = ref(false)
import importModal from '@/components/fireControl/deviceImport.vue'
function onImportSuccess() {
    getData(currentPage.value)
}
//导出
function exportAction() {
    let name = filterForm.name || ''
    let number = filterForm.number || ''
    let url = `${config.baseApi}/uploadFile/getDeviceTemplte?&deviceClassify=${deviceClassify}&name=${name}&number=${number}`
    window.open(url)
}
function downloadAction() {
    window.open(`${config.baseApi}/download/deviceTemplateDownload`)
}

// 新建
function newAction() {
    router.push(`/safe/carGate/device/new`)
}
function editAction(item) {
    router.push(`/safe/carGate/device/new?id=${item.id}`)
}

// 删除
function deleteAction(item) {
    showConfirm({
        content: '您确定要删除该数据吗',
        onConfirm: () => {
            deleteDevice({ id: item.id }).then(() => {
                showMsg('删除成功')
                getData(currentPage.value)
            })
        },
    })
}
// 布防
import placeAlarm from '@/components/safe/placeAlarm.vue'
const placeModalVisible = ref(false)
const activeData = ref(null)
function placeAction(item) {
    activeData.value = item
    placeModalVisible.value = true
}
// 撤防
import cancelAlarm from '@/components/safe/cancelAlarm.vue'
const cancelModalVisible = ref(false)
function removeAction(item) {
    activeData.value = item
    cancelModalVisible.value = true
}
// 开闸
import openGate from '@/components/safe/openGate.vue'
const openModalVisible = ref(false)
function openAction(item) {
    activeData.value = item
    openModalVisible.value = true
}
</script>
<template>
    <!-- 导入 -->
    <importModal
        v-model:visible="importModalVisible"
        v-if="importModalVisible"
        :deviceClassId="deviceClassId"
        deviceClassify="3"
        @success="onImportSuccess"
    ></importModal>
    <!-- 布防 -->
    <placeAlarm
        v-model:visible="placeModalVisible"
        v-if="placeModalVisible"
        :activeData="activeData"
        @success="getData(currentPage)"
    ></placeAlarm>
    <!-- 撤防 -->
    <cancelAlarm
        v-model:visible="cancelModalVisible"
        v-if="cancelModalVisible"
        :activeData="activeData"
        @success="getData(currentPage)"
    ></cancelAlarm>
    <!-- 开闸 -->
    <openGate
        v-model:visible="openModalVisible"
        v-if="openModalVisible"
        :activeData="activeData"
        @success="getData(currentPage)"
    ></openGate>
    <div class="filter-box white-box d-flex">
        <el-form :inline="true" :model="filterForm" class="d-flex-1">
            <el-form-item label="设备名称">
                <el-input v-model="filterForm.name" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="设备号">
                <el-input v-model="filterForm.number" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="设备状态">
                <el-select
                    v-model="filterForm.current_state"
                    placeholder="请选择"
                >
                    <el-option label="正常" value="1" />
                    <el-option label="报警 " value="2" />
                    <el-option label="离线 " value="3" />
                    <el-option label="故障 " value="4" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchAction">搜索</el-button>
            </el-form-item>
        </el-form>
        <div class="el-form-item">
            <el-button type="primary" @click="newAction">新增</el-button>
            <el-button type="primary" @click="importModalVisible = true">
                设备导入
            </el-button>
            <el-button type="primary" @click="exportAction"> 导出 </el-button>
            <el-button type="primary" @click="downloadAction">
                模板下载
            </el-button>
        </div>
    </div>
    <div class="white-box mt-20 d-flex-1 overflow-auto">
        <el-table :data="dataList" class="my-10 full" v-loading="loading">
            <el-table-column label="设备编号" prop="number" />
            <el-table-column label="设备名称" prop="name" />
            <el-table-column label="设备类型" prop="device_type" />
            <el-table-column label="安装位置" prop="position" />
            <el-table-column label="安装人员" prop="install_person" />
            <el-table-column label="安装时间" prop="installTime" />
            <el-table-column label="报警电话" prop="alarm_phone" />
            <el-table-column label="设备状态" prop="current_state">
                <template #default="scope">
                    <span
                        v-if="scope.row.current_state == 1"
                        class="color-success"
                    >
                        正常
                    </span>
                    <span
                        v-else-if="scope.row.current_state == 2"
                        class="color-warning"
                    >
                        报警
                    </span>
                    <span
                        v-else-if="scope.row.current_state == 3"
                        class="color-info"
                    >
                        离线
                    </span>
                    <span
                        v-else-if="scope.row.current_state == 4"
                        class="color-danger"
                    >
                        故障
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template #default="scope">
                    <el-tooltip effect="dark" content="编辑" placement="top">
                        <el-button
                            type="primary"
                            link
                            @click="editAction(scope.row)"
                        >
                            <el-icon size="16"><Edit /></el-icon>
                        </el-button>
                    </el-tooltip>
                    <el-tooltip effect="dark" content="删除" placement="top">
                        <el-button
                            type="primary"
                            link
                            @click="deleteAction(scope.row)"
                        >
                            <el-icon size="16"><Delete /></el-icon>
                        </el-button>
                    </el-tooltip>
                    <el-tooltip effect="dark" content="布防" placement="top">
                        <el-button
                            type="primary"
                            link
                            @click="placeAction(scope.row)"
                        >
                            <i class="iconfont icon-place-alarm"></i>
                        </el-button>
                    </el-tooltip>
                    <el-tooltip effect="dark" content="撤防" placement="top">
                        <el-button
                            type="primary"
                            link
                            @click="removeAction(scope.row)"
                        >
                            <i class="iconfont icon-cancel-alarm"></i>
                        </el-button>
                    </el-tooltip>
                    <el-tooltip effect="dark" content="开闸" placement="top">
                        <el-button
                            type="primary"
                            link
                            @click="openAction(scope.row)"
                        >
                            <i class="iconfont icon-road-gate"></i>
                        </el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <div class="fl-bw">
            <div></div>
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                layout="prev, pager, next, jumper"
                v-model:total="total"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>
<style lang="scss" scoped></style>
